<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="referrer" content="same-origin"/>
	<meta name="isLogin" th:content="${isLogin}">
	<link rel="stylesheet" type="text/css" href="/css/logo.css">
	<link rel="stylesheet" type="text/css" href="/css/index.css">
	<link rel="stylesheet" type="text/css" href="/css/search.css">
	<link rel="stylesheet" type="text/css" href="/css/jquery.page.css">
	<link rel="stylesheet" type="text/css" href="http://demo.htmleaf.com/1901/201901251459/src/css/dialog.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="/css/index_pc.css">

	<link rel="stylesheet" type="text/css" th:if="${config.pcCSS != null && config.pcCSS.trim() != ''}" th:href="${config.pcCSS}">
	<title>搜索</title>
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="http://demo.htmleaf.com/1901/201901251459/src/jquery.dialog.js"></script>
<script src="/js/jquery.page.js"></script>
<script src="/js/Util.js"></script>
<script src="/js/suggestBox.js"></script>
<script src="/js/progress.js"></script>
<script src="/js/common.js"></script>
<script src="/js/CardCreator.js"></script>
<script src="/js/scriptLoader.js"></script>
<body>
	<div style="display: none;" id="hidden">
		<form  target="_blank" method="get" action="/play" id="form">
			<input name="tvid" type="hidden" />
			<input name="platform" type="hidden" />
			<input name="docid" type="hidden" />
			<input name="url" type="hidden" />
			<input name="data" type="hidden"/>
			<input type="submit" >
		</form>
		<a href="#" target="_blank"><span id="open"></span></a>
	</div>

	<div style="position: absolute;top: 0;bottom: 0;left: 0;width: calc(100% - 50px);">
		<div class="background"></div>
		<div>
			<div id="progressBox"></div>
			<div class="searchBox">
				<div class="innerBox">
					<form class="searchContentBox">
						<select name="platform" class="platformSelect">
							<option th:each="search:${searchList}" th:value="${search.val}" th:text="${search.text}"></option>
						</select>

						<span class="searchBar">
							<input id="search" type="text" class="search" name="key" autocomplete="off"/>
						</span>
						<span class="searchBtnBox">
						<button id="searchBtn" class="searchBtn">
							<i class="fa fa-search"></i>
							<span>搜索</span>
						</button>
					</span>
					</form>
					<div class="suggestBox" id="suggestBox">
						<!--<div class="suggestItem" index="0" key="迪迦奥特曼">迪迦奥特曼</div>
                        <div class="suggestItem" index="1" key="泰罗奥特曼">泰罗奥特曼</div>
                        <div class="suggestItem" index="2" key="欧布奥特曼" >欧布奥特曼</div>
                        <div class="suggestItem" index="3">泽塔奥特曼</div>
                        <div class="suggestItem" index="4">盖亚奥特曼</div>-->
					</div>
				</div>
			</div>
		</div>

		<div class="contentBox">
			<div class="content">
				<div id="tips"></div>
				<div class="cardBoxContent hidden" id="positionCard">
				</div>
				<ul class="cardBoxContent" id="listCardContent">
				</ul>
			</div>
			<div id="page"></div>

			<div class="footer">
				<div id="verse">
					[( ${config.verse} )]
				</div>
				<div id="announce">
					<p>本站内容均从互联网收集而来，仅供交流学习使用，版权归原创者所有</p>
					<p >如有侵犯了您的权益，尽请通知我们，本站将及时删除侵权内容。</p>
				</div>
			</div>
		</div>
	</div>
	<div class="toolsBar">
		<div class="toolsBar_top" th:if="${isLogin}">
			<a href="/user/history" title="历史记录"><i class="jfa fa fa-book"></i></a>
		</div>
		<div class="toolsBar_bottom">
			<a th:if="${!isLogin}" href="/login" title="登录" ><i class="jfa fa fa-user-circle"></i></a>
			<a th:if="${isLogin}" href="/user/logout" title="退出登录" ><i class="jfa fa fa-sign-out"></i></a>
		</div>
	</div>
	<template id="win_template">
		<div class="toolsBar_win">
			<iframe src="#"></iframe>
		</div>
	</template>
</body>
<script type="text/javascript">
	// 减margin-top  减#page - #announce - #announce.padding
	// $(".content").css("min-height", window.innerHeight - 90 - 90 - $("#announce").height() - $("#verse").height() - 20 - 5);
	$(".contentBox").height(window.innerHeight - 40 - $(".searchBox").height() - 2);
	// 90page
	$(".content").css("min-height", $(".contentBox").height() - $(".footer").height() - 90 - 3);
	$(".toolsBar_top").delegate("a", "click", (e) => {
		e.preventDefault();
		var active = $(".active_tool");
		var a = $(e.target).parent("a");
		active.removeClass("active_tool");
		if (a.children("i").is(active)) {
			$(".toolsBar_win").fadeOut(200);
			return;
		}
		a.children("i").addClass("active_tool");
		var href = a.attr("href");
		if ($(".toolsBar_win").length == 0) {
			var t = $("#win_template")[0];
			var template = document.importNode(t.content, true);
			document.body.appendChild(template);
		}
		$(".toolsBar_win iframe").attr("src", href);
		$(".toolsBar_win").fadeIn(200);
	});
	var tipsBox = {};
	var searcher = {};

	SuggestBox({
		rootDom: $("#suggestBox"),
		activeClass: "activeSuggestItem",
		onChange: function(old ,newDom){
			searcher.text($(newDom).text());
		},
		onSelected: function(selected){
			searcher.search($(selected).text());
		}
	}, tipsBox);
	SuggestBox.suggest(util.getParameter().get("key"), function(list){
		var suggestBox = document.getElementById("suggestBox");
		suggestBox.innerHTML = "";
		for(var i = 0, l = list.length; i < l; i ++){
			var item = list[i];
			var li = util.createTag("div", "suggestItem");
			li.setAttribute("key", item);
			li.innerHTML = item;
			suggestBox.appendChild(li);
		}
	})
	Search({
		dom: $("#search"),
		focus: () => tipsBox.show(),
		blur: () => tipsBox.hide(),
		input: (e) => SuggestBox.suggest($(e.target).val()),
		submit: (text) => {tipsBox.hide();$("#searchBtn").click();}
	}, searcher);

	$(document.body).css("opacity", "0");
	$(document.body).animate({opacity:1}, 500);
	var resultCache = [];
	var __page__ = [( ${list} )];

	let page = __page__.data;
	if (page.currentPage <= page.pageAll) {
		$("#page").Page({
			totalPages: page.pageAll,//分页总数
			liNums: 5,//分页的数字按钮数(建议取奇数)
			activeClass: 'activP', //active 类样式定义
			currentPage: page.currentPage,
			hasPrv: false,
			hasNext: false,
			callBack : function(page, prePage){
				if (location.href.indexOf("page=" + prePage) != -1 ) {
					util.redirect(location.href.replace("page="+prePage, "page="+page));
				}
				else {
					util.redirect(location.href + "&page=" + page);
				}
			}
		})
	}

	var key = util.getParameter().get("key");
	searcher.text(key);
	// 初始化搜索引擎
	let platform = util.getParameter().get("platform");
	platform = util.getDefault(platform, "iqiyi");
	$("select [value="+platform+"]").attr("selected", true);

	var cardCreator = new CardCreator();
	var positionBox = document.getElementById("positionCard");
	positionBox.appendChild( cardCreator.createPositionCard() );

	var cardCache = document.createElement("div");
	var config = {errImg: '[[${config.errImg}]]'};
	var result = __page__;
	if (result.code == 0){
		if (result.data.list.length == 0){
			document.getElementById("tips").innerHTML = "<h2 class='msginfo'>暂未搜索到“"+key+"”相关信息</h2>"
		}
		var data = util.getArrayDefault(result.data, "list", []);
		resultCache = util.clone(data);
		for(var i = 0, l = data.length; i < l; i ++){
			data[i].index = i;
			var b = cardCreator.createCard(data[i], document.body, config);
			cardCache.appendChild(b);
		}
	}
	else{
		document.getElementById("tips").innerHTML = "<h2 class='msginfo'>接口错误："+result.msg+"</h2>";
	}
	document.getElementById("listCardContent").innerHTML = cardCache.innerHTML;

	$(".cardBoxContent").delegate( "a", "click", function(e){
		e.preventDefault();
		if ( !$(e.currentTarget).parent().is(".episode_block_more") ){
			var index = $(e.currentTarget).parents(".card").attr("index");
			var docid = $(e.currentTarget).parents(".card").attr("docid");
			var tvid = $(e.currentTarget).attr("tvid");
			var platform = $(e.currentTarget).attr("platform");
			var url = $(e.currentTarget).attr("url");

			if (platform == "qq" || platform == "imgo"){
				var paths = url.split("/");
				tvid = paths[paths.length-1];
				tvid = tvid.substring(0, tvid.indexOf("."));
				docid = paths[paths.length-2];
				if (docid == "cover"){
					docid = tvid;
					tvid = "";
				}
				url = null;
			}

			if (platform == "youku"){
				var paths = url.split("/");
				tvid = paths[paths.length-1];
				tvid = tvid.substring(0, tvid.indexOf("."));
				tvid = tvid.substring(3);
				url = null;
			}

			if (platform == "bilibili"){
				var paths = url.split("/");
				tvid = paths[paths.length-1];
				var index = tvid.indexOf("?");
				if (index != -1){
					tvid = tvid.substring(0, index);
				}
				docid = tvid;
				url = null;
			}
			var data = "";
			if ( tvid == "undefined" || tvid == "null" || tvid == ""){
				data = JSON.stringify(resultCache[index]);
			}
			$("#form").find("input[name=data]").val( data );
			$("#form").find("input[name=url]").val(util.getDefault(url, "", true));
			$("#form").find("input[name=platform]").val( util.getDefault(platform, "", true));
			$("#form").find("input[name=tvid]").val(  util.getDefault(tvid, "", true));
			$("#form").find("input[name=docid]").val(  util.getDefault(docid, "", true));
			$("#form").find("input[type=submit]").click();
		}
	});
	$(".cardBoxContent").delegate(".episode_block", "click", function(e){
		if ( $(e.currentTarget).is(".episode_block_more") ){
			var parent = $(e.currentTarget).parent();
			parent.find(".episode_block_hidden").css("display", "block");
			$(e.currentTarget).css("display", "none");
			parent.parent().find(".fold_episode_block_hidden").css("visibility", "visible");
		}
	})
	$(".cardBoxContent").delegate(".fold_episode_block_hidden", "click", function(e){
		var parent = $(e.currentTarget).parent();
		parent.find(".episode_block_hidden").css("display", "none");
		parent.find(".episode_block_more").css("display", "block");			
		$(e.currentTarget).css("visibility", "hidden");
	})
</script>
<script type="text/javascript" th:if="${config.pcJS != null && config.pcJS.trim() != ''}" th:src="${config.pcJS}"></script>
</html>